﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏404页面样式展示</title>



    @include("frontend/bootstrap/common/css")

    <link href="/theme/bootstrap/css/404.css?t={{$version}}" rel="stylesheet">

    <style>
        :root {
            --color-1: #1a1a2e;
            --color-2: #16213e;
            --color-3: #e94560;
            --color-4: #0f3460;
            --color-5: #f9f9f9;
            --color-6: #2d4059;
            --color-7: #ea5455;
            --color-8: #4ecca3;
        }

        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            padding: 2rem 0;
            color: #333;
        }

        .page-title {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #eee;
        }

        .section-header {
            font-size: 1.4rem;
            margin: 3rem 0 1.5rem;
            color: #2d3748;
            padding-left: 0.5rem;
            border-left: 4px solid #3182ce;
        }

        .page-demo {
            margin-bottom: 4rem;
            position: relative;
        }

        .page-description {
            margin-top: 1rem;
            padding: 1rem;
            font-size: 0.95rem;
            color: #666;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

    </style>
</head>
<body>
<div class="container">
    <h1 class="page-title">全屏404页面样式展示</h1>

    <h2 class="section-header">基础风格404页面</h2>

    <!-- 现代简约风格404 -->
    <div class="page-demo">
        <p class="page-description">现代简约风格404页面 - 简洁的设计，清晰的信息传达，适合大多数现代网站</p>
        @include("frontend/bootstrap/page/404-1")
    </div>

    <!-- 深色风格404 -->
    <div class="page-demo">
        <p class="page-description">深色风格404页面 - 深色背景搭配亮色强调，适合现代科技感网站</p>
        @include("frontend/bootstrap/page/404-2")
    </div>

    <h2 class="section-header">创意风格404页面</h2>

    <!-- 强调色风格404 -->
    <div class="page-demo">
        <p class="page-description">强调色风格404页面 - 带有装饰元素的错误代码，更具设计感</p>
        @include("frontend/bootstrap/page/404-3")
    </div>

    <!-- 趣味风格404 -->
    <div class="page-demo">
        <p class="page-description">趣味风格404页面 - 轻松活泼的语气和装饰元素，减轻用户挫折感</p>
        @include("frontend/bootstrap/page/404-4")
    </div>

    <h2 class="section-header">特殊风格404页面</h2>

    <!-- 极简风格404 -->
    <div class="page-demo">
        <p class="page-description">极简风格404页面 - 极致简约的设计，只保留必要信息，适合极简主义网站</p>
        @include("frontend/bootstrap/page/404-5")
    </div>

    <!-- 创意数字风格404 -->
    <div class="page-demo">
        <p class="page-description">创意数字风格404页面 - 数字以独特方块形式呈现，视觉冲击力强</p>
        @include("frontend/bootstrap/page/404-6")
    </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
	document.addEventListener('DOMContentLoaded', function () {

		// 页面滚动动画
		const animateOnScroll = () => {
			const demos = document.querySelectorAll('.page-demo');
			demos.forEach((demo, index) => {
				const demoTop = demo.getBoundingClientRect().top;
				const triggerBottom = window.innerHeight * 0.7;

				if (demoTop < triggerBottom) {
					demo.style.opacity = '1';
					demo.style.transform = 'translateY(0)';
				}
			});
		};

		// 初始化样式
		const demos = document.querySelectorAll('.page-demo');
		demos.forEach((demo, index) => {
			demo.style.opacity = '0';
			demo.style.transform = 'translateY(30px)';
			demo.style.transition = `opacity 0.6s ease ${index * 0.15}s, transform 0.6s ease ${index * 0.15}s`;
		});

		// 初始加载和滚动时触发动画
		window.addEventListener('load', animateOnScroll);
		window.addEventListener('scroll', animateOnScroll);
	});
</script>
</body>
</html>

